<template lang="pug">
.productList
  el-input(placeholder="请输入产品名称" v-model="name" clearable size="mini" style="width:150px")
  el-select(v-model="category_id" placeholder="请输入产品分类ID" clearable filterable size="mini")
    el-option(v-for='item in list' :key="item.id" :label="item.name" :value="item.id")
  el-select(v-model="status" placeholder="请输入产品审核状态" filterable clearable size="mini")
    el-option(v-for='item in SeaId' :key="item.id" :label="item.name" :value="item.id")
  el-button(type="primary" size="mini" @click="onSea") 查找
  el-button(type="primary" size="mini" @click="onAdd" v-p="['shop.product.create']") + 添加

  el-table(:data="form" border  style="width: 100%" v-loading="loading")
    details-box
    el-table-column(prop="id" label="产品ID")
    el-table-column(label="产品名称")
      template(slot-scope="scope")
        div(:class="scope.row.status === 3 ? 'box':''" style="text-align:center") {{scope.row.name}}
    el-table-column(prop="category_name" label="产品分类")
    el-table-column(prop="create_time" label="创建时间")
    el-table-column(label="审核状态")
      template(slot-scope="scope")
        el-tag(:type="scope.row.status===2?'':(scope.row.status===1?'info':(scope.row.status===3?'success':'warning'))") {{scope.row.status_name}}
        el-tooltip(:content="scope.row.approve_msg" placement="top")
          i(v-if="scope.row.status===4 ||scope.row.status===3" :style="scope.row.status===4?'color: #e6a23c':'color:#67c23a'" class='el-tooltip el-icon-warning')
    el-table-column(label="操作")
      template(slot-scope="scope")
        el-button(type="primary" size="mini" @click="onEdit(scope.row)" v-p="['shop.product.update']") 编 辑
        el-button(type="danger" size="mini" v-p="['shop.product.delete']" @click="detail(scope.row.id)") 删 除
        el-button(type="primary" size="mini" v-if="scope.row.status === 1 || scope.row.status === 4" @click="onSubmit(scope.row.id)" v-p="['shop.product.submit']") 提 交
        el-button(type="success" size="mini" v-if="scope.row.status === 2" @click="onExamine(scope.row.id)" v-p="['shop.product.approve']") 审 核
  el-pagination(@size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page+1"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total")
  product-add(:list="list" v-model="show" @proAdd="onPadd")
  ProductEdit(:list="list" v-model="isShow" @proEdit="onPedit" :row="row")
  examine-box(v-model="examineShow" @onSub="onsubMit")
</template>
<script>
import ProductAdd from '@/components/shop/ProductAdd.vue'
import DetailsBox from '@/components/shop/DetailsBox.vue'
import ProductEdit from '@/components/shop/ProductEdit.vue'
import ExamineBox from '@/components/shop/ExamineBox.vue'
export default {
  components: {
    ProductAdd,
    DetailsBox,
    ProductEdit,
    ExamineBox
  },
  data() {
    return {
      form:[],
      page:0,
      limit:5,
      name:'',
      category_id:'',
      status:0,
      total:0,
      list:[],
      SeaId:[{
        id:0,
        name:'全部'
      },{
        id:1,
        name:'未提交'
      },{
        id:2,
        name:'待审核'
      },{
        id:3,
        name:'通过'
      },{
        id:4,
        name:'拒绝'
      }],
      show:false,
      loading:false,
      isShow:false,
      row:{},
      examineShow:false,
      examineId:''
    }
  },
  created() {
    this.data()
    this.setList()
  },
  methods: {
    data() {
      this.loading = true
      const { page,limit,name,category_id,status } = this;
      this.axios.get('/product/list',{
        params:{ page,limit,name,category_id,status}
      }).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.form = data.data.list
          this.total = data.data.total
          this.loading = false
        }
      })
    },
    // 查找
    onSea() {
      this.data()
    },
    // 添加
    onAdd() {
      this.show = true
    },
    onPadd(arr) {
      this.loading = true
      this.axios.post('/product/add',{...arr}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            message:'添加成功',
            type:'success'
          })
          this.show = false
          this.data()
          this.loading = false
        }
      })
    },
    // 编辑
    onEdit(row) {
      this.isShow = true
      this.row = row
    },
    onPedit(data) {
      this.loading = true
      this.axios.post('/product/edit',{...data}).then(({data}) => {
        if(!data.errcode) {
          this.$message({
            message:'编辑成功',
            type:'success'
          })
          this.show = false
          this.data()
          this.loading = false
        }
      })
    },
    // 删除
    detail(id) {
      this.loading = true
      this.axios.post('/product/delete',{id}).then(({data}) => {
        if(!data.errcode) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.data()
            this.loading = false
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
        }
      })
    },
    // 提交
    onSubmit(id) {
      this.axios.post('/product/submit',{id}).then(({data}) => {
        if(!data.errcode) {
          this.$confirm('商品信息已经添加无误，提交给上级审核，确认操作？',{
            confirmButtonText: '确定提交',
            cancelButtonText: '暂不操作',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '提交成功!'
            });
            this.data()
            this.loading = false
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          })
        }
      })
    },
    // 审核
    onExamine(id) {
      this.examineId = id
      this.examineShow = true;
    },
    onsubMit(data) {
      this.loading = true
      this.axios.post('/product/approve',{id:this.examineId,...data}).then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.$message({
            type: 'success',
            message: '审核成功!'
          });
          this.examineShow = false
          this.data()
          this.loading = false
        }
      })
    },
    setList() {
      this.axios.get('/category/list').then(({data}) => {
        console.log(data);
        if(!data.errcode) {
          this.list = data.data.list
        }
      })
    },
    handleSizeChange(size) {
      this.limit = size;
      this.page = 0
      this.data()
    },
    handleCurrentChange(val) {
      this.page = val-1
      this.data()
    }
  },
}
</script>
<style lang="sass">
.el-tooltip
  color: #e6a23c
.el-button
  padding: 5px
tbody
  .el-table__row
    .el-table_1_column_3
      .box::after
        content: "已上架"
        display: flex
        justify-content: center
        align-items: center
        position: absolute
        top: 50%
        left: 0px
        transform-origin: 0px 50%
        transform: translateY(-50%) scale(0.8)
        line-height: 1.3em
        width: 16px
        font-size: 12px
        background-color: rgb(103, 194, 58)
        color: rgb(255, 255, 255)
        padding: 3px 0px
        border-radius: 0px 4px 4px 0px
</style>
